<template>
   <div class="header">
    <div class="warp">
        <div class="l">
            <span>成交金额：{{money}}元</span>
        </div>
        <!-- <div class="r"> -->
            <ul>
                <li v-if="hidden">
                    <el-dropdown class="dropdownMenu" @command="personalCenter">
                        <span class="el-dropdown-link">
                            {{name}}<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="editUserInfo">个人中心</el-dropdown-item>
                            <el-dropdown-item command="quit" @click.native="logout">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </li>
                <li v-if="hidden" @click="goUserCenter('3')">
                    <el-badge :value="messagelength" :max="99"  class="item" type="warning">
                        <div class="message">
                            <i class="el-icon-message-solid"></i>
                            <span>消息</span>
                        </div>
                    </el-badge>
                </li>
                <li v-if="hidden" @click="goUserCenter('2')">我的竞拍</li>
                <li v-if="hiddenElse" @click="$router.push('/user/register')">免费注册</li>
                <li v-if="hiddenElse" @click="$router.push('/login')">竞买方登录</li>
                <li @click="goFirmLogin">拍卖企业登录</li>
                <li @click="goWeituoLogin">委托方登录</li>
            </ul>
        <!-- </div> -->
    </div>
   </div>
</template>
<script>
import {getUserInfoID,getToken} from '@/utils/auth'
import {messageList} from '@/api/user'
import {amount} from '@/api/user'
 export default {
    data() {
      return {
        money: '',
        uid:"",
        name:'',
        hidden:false,
        hiddenElse: true,
        messageData:[],
        timer:null,
        messagelength:""
      };
    },
    beforeCreate(){
        const hasToken = getToken();
        if(hasToken){
            this.$store.dispatch('getUserInfo');
        }
        
    },
    mounted(){
        var token = getToken();
        
        if(token){
            var info = getUserInfoID();
            this.hidden = true;
            this.hiddenElse = false;
            
            if(info){
                var info = JSON.parse(info);
                this.name =info.username;
                this.uid = info.id;
            }
            
            this.messageInfo();
            this.pollMessages();
        }else{
           this.hiddenElse=true; 
           this.hidden = false;
           clearInterval(this.timer);
        }
        this.getMoney();
    },
    methods: {
        getMoney(){
            amount().then(res=>{
                if(res.code == 200){
                    this.money =  res.data.amount;
                }
            }).catch(err=>{
            });
        },
        personalCenter(command){
            if(command =='editUserInfo'){
                // 跳转到实名认证
                this.$router.push({path:'/userCenter/userInfo',query: {index:'1'}});
            }else if(command =='quit'){

            }
            
        },
        logout(){
            this.$store.dispatch('bidderLogout').then(() => {
                this.$router.push({ path: '/login' });
            }).catch(() => {
                // this.loading = false
            });
        },
        // 点击我的竞拍
        goUserCenter(index){
            var query= this.$route.name;
            if(index==3&&query=='userInfo'){
                location.reload()
            }
            this.$router.push({path:'/userCenter/userInfo',query: {index:index}});
        },
        pollMessages(){
            this.timer = window.setInterval(() => {
                setTimeout(()=>{
                    this.messageInfo();

                }, 0);
                
                var token = getToken();
                if(token){
                    var info = getUserInfoID();
                    
                    if(info){
                        var info = JSON.parse(info);
                        this.name =info.username;
                        this.uid = info.id;
                    }
                }
            }, 5000);
        },
        messageInfo(){
            messageList({uid:this.uid,type:'1'}).then((res) => {
                if (res.code === 200) {
                    this.messageData = res.data;
                    this.messagelength = res.data.length;
                }
            });
        },
        goFirmLogin(){
            window.open('https://www.ympai.net/dist/#/login', '_blank');
        },
        goWeituoLogin(){
            // let {href}= this.$router.resolve({
            //     path: '/lots/detail',
            // });
            window.open('https://www.ympai.net/entrust', '_blank');
        },
    },
    destroyed() {
        clearInterval(this.timer);
    }
  }
</script>

<style lang="less" scoped>
@import '@/styles/index.less';
.header{
    font-size:smaller;
    height: 38px;
    line-height: 38px;
    background-color: #f6f6f6;
    color: #8e95a1;
    font-size: 12px;
    .warp{
        display: flex;
        justify-content: space-between;
        align-items: center;
        // .r {
            // line-height: 45px;
            ul{
                display: flex;
                height: 24px;
                line-height: 24px;
                li{
                    /deep/.el-badge{
                        .el-badge__content{
                            top: 4px;
                            right: 4px;
                        }
                    }
                    padding: 0px 10px;
                    margin: 0 2px;
                    cursor: pointer;
                    .el-dropdown-link {
                        cursor: pointer;
                        color: #868c96;
                    }
                }
                li:hover{
                    background-color: #fff;
                    color: @base-color;
                    border-radius: 20px;
                    .el-dropdown-link{
                        color: @base-color;
                    }
                    .message{
                        i{
                            color: @base-color;
                        }
                    }
                }
                // li:first-child{
                //     color: #cc0000;
                // }
            }
        // }
        .message{
            display: flex;
            align-items: center;
            i{
                font-size: 16px;
                color: #868c96;
            }
        }
        
    }
}
</style>